<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
{% load my_filters_and_tags %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    粒子示踪动画
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <link rel="stylesheet"
          href="{% static '/ol/ol.css' %}"
          type="text/css">
    <style>
        .map {
            height: 500px;
            width: 100%;
        }

        .second_layer {
            height: 35px;
            top: -465px;
            left: 350px;
            position: relative;
            background-color: #FFFF00;
            font-family: "Microsoft YaHei";
            font-size: 24px;
        }
        .simu_info {
            height: 25px;
            top: -405px;
            left: 550px;
            position: relative;
            background-color: #FFFF00;
            font-family: "Microsoft YaHei";
            font-size: 16px;
        }
    </style>
    <script src="{% static '/ol/ol.js' %}"></script>
    <script src="{% static 'proj4.js' %}"></script>


    <div class="container">
        <!-- 搜索栏 -->
        <div class="row">
            <div id="map" class="map"></div>
            <div id="notice"  class="second_layer">2019.12枯季小潮 粒子示踪示意图</div>
            <div id="simulation_time"  class="simu_info"></div>

            <form class="form-inline">
                <label for="type">选项: &nbsp;</label>
                <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
                <a id="image-download" download="map1.png"></a>
                <a id="next_frame" class="btn btn-default"><i class="fa fa-arrow-circle-right"></i>下一帧</a>
            </form>
            <script src="{% static 'total_locs.js' %}"></script>
            <script src="{% static 'test_draw_4.js' %}"></script>
            <!-- 添加导出按钮 -->
            {#            //引用FileSaver.js#}
            {#            <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>#}

            {#            //添加导出按钮#}
            {#            <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>#}

        </div>

    </div>


{% endblock content %}